<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人社保计算软件-web版</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
		//js代码的地方
		function calc(){
			sal=$("#salary").val();
			salnum=parseInt(sal);
			养老个人=salnum*0.08;
			养老公司=salnum*0.2;
			$("#养老个人").text(养老个人);
			$("#养老公司").text(养老公司);
			医保个人=salnum*0.02;
			医保公司=salnum*0.06;
			$("#医保个人").text(医保个人);
			$("#医保公司").text(医保公司);
			失业个人=salnum*0.005;
			失业公司=salnum*0.015;
			$("#失业个人").text(失业个人);
			$("#失业公司").text(失业公司);
			工伤公司=salnum*0.005;
			$("#工伤公司").text(工伤公司);
			公司生育=salnum*0.008;
			$("#公司生育").text(公司生育);
			公积金个人=salnum*0.12;
			公积金公司=salnum*0.12;
			$("#公积金个人").text(公积金个人);
			$("#公积金公司").text(公积金公司);
			个人合计=养老个人+医保个人+失业个人+公积金个人;
			公司合计=养老公司+医保公司+失业公司+工伤公司+公司生育+公积金公司;
			$("#个人合计").text(个人合计);
			$("#公司合计").text(公司合计);
			总额=salnum+公司合计;
			$("#总额").text(总额);
		}
		</script>
	</head>
	<body>
		<div class="container text-center">
			<h3>个人社保计算软件——朱泳吉</h3>
			<table class="table table-bordered text-center"> 
				<tr>
					<td>工资</td>
					<td colspan="3">
						<input id="salary"class="form-control"text"placeholder="请输入工资"/>
					</td>
					<td>
						<button onclick="calc()"class="btn btn-danger btn-block">计算</button>
					</td>
				</tr>
				<tr class="bg-primary">
					<td>险种</td>
					<td>个人%</td>
					<td>个人</td>
					<td>公司%</td>
					<td>公司</td>
				</tr>
				<tr>
					<td>养老保险</td>
					<td>8%</td>
					<td id="养老个人"></td>
					<td>20%</td>
					<td id="养老公司"></td>
				</tr>
				<tr>
					<td>医疗保险</td>
					<td>2%</td>
					<td id="医保个人"></td>
					<td>6%</td>
					<td id="医保公司"></td>
				</tr>
				<tr>
					<td>失业保险</td>
					<td>0.5%</td>
					<td id="失业个人"></td>
					<td>1.5%</td>
					<td id="失业公司"></td>
				</tr>
				<tr>
					<td>工伤保险</td>
					<td></td>
					<td></td>
					<td>0.5%</td>
					<td id="工伤公司"></td>
				</tr>
				<tr>
					<td>生育保险</td>
					<td></td>
					<td></td>
					<td>0.8%</td>
					<td id="公司生育"></td>
				</tr>
				<tr>
					<td>公积金</td>
					<td>12%</td>
					<td id="公积金个人"></td>
					<td>12%</td>
					<td id="公积金公司"></td>
				</tr>
				<tr>
					<td>合计</td>
					<td>个人合计</td>
					<td id="个人合计"></td>
					<td>公司合计</td>
					<td id="公司合计"></td>
				</tr>
				<tr>
					<td>总额</td>
					<td id="总额"colspan="4"></td>
				</tr>
			</table>
			太原学院 45 朱泳吉
		</div>
	</body>
</html>